<template>
  <div class="topic" v-if="topic">
    <div class="author-container">
      <div class="user-avatar">
        <img class="block" :src="topic.author.avatar_url" alt="">
      </div>
      <div class="author-info">
        <p class="author-name">{{topic.author.loginname}}</p>
        <p>
          发布于 {{getTimeInterval(topic.create_at)}}
          &nbsp;&nbsp;&nbsp;
          {{topic.visit_count}} 次浏览
        </p>
      </div>
    </div>
    <div class="topic-container">
      <div class="topic-content" v-html="topic.content">
      </div>
    </div>

    <div class="reply-container">
      <ul>
        <li><span>24回复</span></li>
        <li>
          <section class="reply-item">
            <div class="user-avatar">
              <!--<img class="block" :src="topic.author.avatar_url" alt="">-->
            </div>
          </section>
        </li>
      </ul>

    </div>
  </div>
</template>

<script>
  export default {
    name: "Topic",
    data() {
      return {
        topic: undefined
      }
    },
    methods:{
      getTimeInterval(timeStr){
        var date = Date.parse(timeStr);
        var minute=((new Date().getTime()/1000-date/1000)/60).toFixed(0);
        if (minute<60)
          return minute+"分钟前";
        else if (minute/60<24)
          return (minute/60).toFixed(0)+"小时前";
        else if (minute/1440<30)
          return (minute/1440).toFixed(0)+"天前";
        else if (minute/43200<12)
          return (minute/43200).toFixed(0)+"月前";
        else
          return (minute/518400).toFixed(0)+"年前";
      }
    },
    created() {
      let id = this.$route.params.id;
      if (id) {
        this.$http.get("https://cnodejs.org/api/v1/topic/" + id).then((response) => {
            this.topic = response.body.data;
            this.$emit('changeTab', this.topic.title);
            document.title = this.topic.title;
          }, response => {
            console.log('error');
          }
        )
      }
    }
  }
</script>
<style lang="less" scoped>
  .topic {
    min-height: 100%;
    padding: 1rem;
    background: #F0F0F0;
    box-sizing: border-box;
  }
  .user-avatar{
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
  }
  .user-avatar img{
    width: 100%;
    height: 100%;
  }
  .topic-container,
  .reply-container{
    box-shadow: 1px 1px 3px #CCC;
    line-height: 2em;
    background: #FFFFFF;
    margin-bottom: 15px;
  }
  .author-container{
    margin: 15px 15px 30px;
    min-height:60px ;
    .author-info{
      margin-left: 80px;
      p{
        color: #888;
        font-size: 12px;
        line-height: 30px;
      }
      .author-name{
        font-size: 15px;
        color: #666;
      }

    }

  }
  .topic-container{
    padding: 15px;
  }
</style>
<style lang="less">


  .reply-container{
    font-size: 15px;
    h4{
      margin: 0;
    }
    ul{
      li{
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }
  .topic-content {
    p {
      font-size: 15px;
      line-height: 1.7em;
      overflow: auto;
    }
    blockquote {
      padding: 0 0 0 15px;
      margin: 0 0 20px;
      border-left: 5px solid #eee;
      p {
        font-weight: 300;
        margin: 1rem 0;
      }
    }
    img {
      max-width: 100%;
    }
    ul {
      margin:  0 1.6em;
      list-style: disc;
      ul {
        list-style: circle;
      }
    }
    li{
      font-size: 14px;
    }
    div pre.prettyprint {
      font-size: 14px;
      border-radius: 0;
      padding: 0 15px;
      border: none;
      margin: 20px -10px;
      border-width: 1px 0;
      background: #f7f7f7;
      tab-size: 4;
    }
    pre code {
      padding: 0;
      margin: 0;
      color: inherit;
      white-space: pre-wrap;
      background-color: transparent;
    }
  }
</style>

